<template>
  <a-card :bordered="false">
    <h3>素材详情</h3>
    <a-form-model
      ref="rulesForm"
      :labelCol="{ lg: { span: 5 }, sm: { span: 7 } }"
      :wrapperCol="{ lg: { span: 16 }, sm: { span: 17 } }"
    >
      <a-form-model-item label="内容文案">
        <div style="line-height: 20px;display: inline-block;word-break: break-word;">{{look.briefIntroduction || ''}}</div>
      </a-form-model-item>
      <a-form-model-item label="图片">
        <div class="my-img-list-wrapper">
          <div class="my-img-item" @click="handleShowImg(index)" v-for="(item, index) in imgList"
               :key="index">
            <div class="my-img-item-con">
              <img :src="item" alt="">
            </div>
          </div>
        </div>
      </a-form-model-item>
      <a-form-model-item label="视频" v-if="videoList.length">
        <JImageUpload disabled :uploadParams="getUploadParams()" :isMultiple="true" :fileSize="20" :number="1" :accept="'video/*'" @fileChange="fileVideoChange" v-model="videoList"></JImageUpload>
      </a-form-model-item>
      <a-form-model-item label="关联商品">
        <a-table bordered :pagination="false" :columns="productColumns" :data-source="productList" :rowKey="(record, index) => index">
         <span class="product" slot="product" slot-scope="text, record, index">
            <img class="img"  :src="JSON.parse(record.extendJson || '{}').productImage || ''" alt="">
            <div class="product-name">{{JSON.parse(record.extendJson || '{}').productName || ''}}</div>
         </span>
          <span slot="remarks" style="color: red;" slot-scope="text, record, index">
             {{record.remark || '/'}}
          </span>
        </a-table>
      </a-form-model-item>
      <a-form-model-item label="状态" >
        <span v-if="state === '0'">可同步</span>
        <span v-if="state == 1">已同步</span>
        <span v-if="state == 2">不可同步</span>
      </a-form-model-item>
      <a-form-model-item label="来源">
        {{typeName(look.type)}}({{sonTypeName(look.sonType)}})
      </a-form-model-item>
      <a-form-model-item :wrapperCol="{ span: 24 }" style="text-align: center">
        <a-button style="margin-right: 8px" @click="handleBack">返回</a-button>
        <a-button htmlType="submit" type="primary" :disabled="state == 2" @click="handleSubmit">确认同步</a-button>
      </a-form-model-item>
    </a-form-model>
    <ParagraphPic :current="imgCurrent" :visible.sync="imgVisible" :imgs="imgList"></ParagraphPic>
  </a-card>
</template>
<script>
  import { materialLookDetails } from '@/api/micromall/materialTools'
  import JImageUpload from '../../components/JImageUpload'
  import ParagraphPic from '../../components/ParagraphPic'
  const productColumns = [
    {
      title: '序号',
      width: '1',
      align: 'center',
      customRender: (text,record,index) => `${index+1}`
    },
    {
      title: '商品',
      width: '10',
      align: 'center',
      scopedSlots: { customRender: 'product' }
    },
    {
      title: '款号',
      width: '4',
      align: 'center',
      dataIndex: 'productCode'
    },
    {
      title: '年份',
      width: '3',
      align: 'center',
      dataIndex: 'year'
    },
    {
      title: '波段',
      width: '3',
      align: 'center',
      dataIndex: 'band'
    },
    {
      title: '季节',
      width: '3',
      align: 'center',
      dataIndex: 'season'
    },
    {
      title: '备注',
      width: '3',
      align: 'center',
      scopedSlots: { customRender: 'remarks' }
    }
  ]
  export default {
    components: {
      ParagraphPic,
      JImageUpload
    },
    data() {
      return {
        state: this.$route.query.state,
        isCanSync: false,
        imgCurrent: 0,
        imgVisible: false,
        videoList: [],
        imgList: [],
        productColumns,
        look: {},
        productList: [
        ],
        typeList: [
          {
            name: '有搭素材',
            code: 10
          },
          {
            name: '零售素材',
            code: 20
          },
          {
            name: '导购素材',
            code: 30
          }
        ],
        sonTypeList: [
          {
            name: '搭配师',
            code: 1001
          },
          {
            name: '明星导购',
            code: 3001
          },
          {
            name: '普通导购',
            code: 3002
          },
          {
            name: 'KOU导购',
            code: 3003
          },
          {
            name: '总部经理',
            code: 3004
          },
          {
            name: '大区经理',
            code: 3005
          },
          {
            name: 'BOX+主动要盒素材',
            code: 2001
          },
          {
            name: 'JNBY陈列',
            code: 2002
          },
          {
            name: '抖音同款',
            code: 2003
          },
          {
            name: '品牌代言人',
            code: 2004
          },
          {
            name: '主题穿搭推荐',
            code: 2005
          },
          {
            name: '小红书达人同款',
            code: 2006
          },
          {
            name: '营销活动',
            code: 2007
          },
          {
            name: '明星达人穿搭',
            code: 2008
          },
          {
            name: '搭配图&单品图',
            code: 2009
          },
          {
            name: '新品季度大片',
            code: 2010
          },
          {
            name: '社群素材',
            code: 2011
          },
          {
            name: 'JNBYHOME-O',
            code: 2012
          },
          {
            name: 'JNBYHOME-M',
            code: 2013
          },
          {
            name: 'JNBYHOME-H',
            code: 2014
          },
          {
            name: 'JNBYHOME-E',
            code: 2015
          },
          {
            name: '总部搭配师',
            code: 2016
          },
          {
            name: '会员部',
            code: 2017
          },
          {
            name: '品牌代言人同款',
            code: 2018
          }
        ]
      }
    },
    created() {
      this.getDetails()
    },
    computed: {
      typeName() {
        return (value) => {
          const checkedTypeList = this.typeList.filter(e => e.code == value)
          if (checkedTypeList.length) {
            return checkedTypeList[0].name
          } else {
            return ''
          }
        }
      },
      sonTypeName() {
        return (value) => {
          const checkedSonTypeList = this.sonTypeList.filter(e => e.code == value)
          if (checkedSonTypeList.length) {
            return checkedSonTypeList[0].name
          } else {
            return ''
          }
        }
      }
    },
    mounted() {
    },
    methods: {
      getDetails() {
        const id = this.$route.params.id
        const lookId = this.$route.query.lookId
        const data = {
          brandId: id,
          lookId
        }
        materialLookDetails(data).then(res => {
          if (res.code === 200) {
            const {look, galleryList, productList, isCanSync} = res.data
            this.look = look
            this.isCanSync = isCanSync
            this.imgList = galleryList.filter(e => e.type === 0).map(e => e.url)
            this.videoList = galleryList.filter(e => e.type === 1).map(e => e.url)
            this.productList = productList
          } else {
            this.$message.error(res.data.msg)
          }
        }).catch(err => {
        })
      },

      // 查看大图
      handleShowImg(index){
        this.imgCurrent = index
        this.imgVisible = true
      },

      getUploadParams() {
        return {
            actionUrl: 'https://jic.jnby.com/activity/market-act/common/upload/multipart',
            headers: {
              authorization: 'authorization-text'
            },
            uploadHost: 'https://img.bzhz.jnbygroup.com/'
          }
      },

      //视频change
      fileVideoChange(list) {
        this.form.videoList = list
      },

      handleSubmit() {
        const {params, query} = this.$route
        this.$router.push(`/micromall/community/materialTools/synchronization/${params.id}?lookId=${query.lookId}&state=${query.state}`)
      },

      //返回
      handleBack() {
        this.$router.go(-1)
      },
    }
  }
</script>
<style lang="less" scoped>
  .my-img-list-wrapper {
    display: flex;
    flex-wrap: wrap;
  }

  .my-img-list {
    display: flex;
    flex-wrap: wrap;
  }

  .my-img-item {
    position: relative;
    width: 104px;
    height: 104px;
    padding: 8px;
    margin: 0 8px 8px 0;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    cursor: pointer;
  }

  .my-img-item.red {
    border-color: #f5222d;
  }

  .my-img-item-con {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .my-img-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .product {
    display: flex;
    align-items: center;
    overflow: hidden;
    .img {
      display: block;
      width: 60px;
      height: 60px;
      border: 1px dashed #f5f5f5;
      object-fit: scale-down;
      cursor: pointer;
    }
    .product-name{
      flex: 1;
      margin-left: 5px;
      width: 80px;
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      word-break: break-all; /* 追加这一行代码 */
      /* autoprefixer: off */
      -webkit-box-orient: vertical;
      /* autoprefixer: on */
    }
  }
</style>
